<template>
	<up-popup :show="show" @close="close" :closeable="true" :round="12" zIndex="100000">
		<view class="container_pop">
			<view class="product-box">
				<img class="product-img" :src="specificationData.goods_images" alt="" />
				<view class="product-info">
					<view class="money">
						<span class="span">￥</span>{{chooseItem.price || specificationData.price}}
					</view>
					<!-- <p class="text">请选择规格</p> -->
				</view>
			</view>
			<up-divider></up-divider>
			<view class="specification-num">
				<block v-if="attrlen>0">
					<view class="span">规格</view>
					<view class="sizeList">
						<block v-for="(item,index) in specificationData.sku" :key='index'>
							<view :class="chooseItem.id == item.id?'size-active':'size-item'" @click="choose(item)">
								{{item.attr}}
							</view>
						</block>
					</view>
				</block>
				<view class="span" style="float: left;">数量</view>
				<view class="goodsNum">
					<up-number-box v-model="goodsNum" @change="valChange"></up-number-box>
				</view>
				<view class="clear"></view>

			</view>
			<view class="custom-style">
				<up-button type="primary" text="确定" shape="circle" @click="addCar"></up-button>
			</view>

		</view>
	</up-popup>

</template>

<script>
	import {
		http
	} from 'uview-plus'
	export default {

		data() {
			return {
				show: false,
				specificationData: [],
				chooseItem: {},
				goodsNum: 1,
				attrlen: 0
			};
		},
		methods: {
			async setup(e) {
				await http.get('/shop/goods/read', {
					params: {
						goods_id: e
					},
					header: {
						'Content-Type': 'multipart/form-data'
					}
				}).then(res => {
					this.specificationData = res;
					this.attrlen = res.sku.length
					this.show = true;
					if (res.sku.length > 0) {
						this.chooseItem = res.sku[0]
					}
				});
			},
			choose(e) {
				this.chooseItem = e
			},
			async addCar() {
				await http.post('/shop/user/cart/save', {
					goods_id: this.specificationData.id,
					num: this.goodsNum,
					goods_sku_id: this.chooseItem.id || ''
				}).then(res => {
					getApp().get_shopping_List()
					setTimeout(() => {
						this.$emit('chooseItem', this.chooseItem);
						this.chooseItem.goodsNum = this.goodsNum
						this.close()
					}, 1000)
				});
			},
			close() {
				this.show = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container_pop {
		width: 100%;
		min-height: 600rpx;
		padding: 32rpx;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;

		.product-box {
			width: 100%;
			height: 232rpx;
			@include flex(row);

			.product-img {
				width: 232rpx;
				height: 232rpx;
				margin-right: 24rpx;
			}

			.money {
				font-family: 思源黑体;
				font-weight: 400;
				font-size: 57.5rpx;
				color: #E94816;
				margin-top: 32rpx;

				.span {
					font-size: 36rpx;
				}
			}

			.text {
				font-size: 24rpx;
				color: #333333;
				margin-top: 20rpx;
			}
		}

		.specification-num {
			color: #333333;
			height: auto;
			overflow: hidden;
			margin-bottom: 100rpx;

			.sizeList {
				margin: 32rpx 0;

				.size-item {
					display: inline-block;
					padding: 8rpx 20rpx;
					background-color: #F2F2F2;
					border-radius: 8px;
					margin-right: 20rpx
				}

				.size-active {
					@extend .size-item;
					background-color: #fff;
					border: 2rpx solid #E94816;
				}
			}

			.goodsNum {
				float: right;
			}
		}

		.custom-style {
			position: absolute;
			width: calc(100% - 64rpx);
			box-sizing: border-box;
			bottom: 20rpx;

		}
	}
</style>